<template>
  <div class="products-container">
    <h1 class="header">产品展示</h1>
    <div class="card-list">
      <div
        class="card-item"
        v-for="(item, idx) in products"
        :key="idx"
      >
        <img :src="item.imgSrc" />
        <div class="name">{{ item.name }}</div>
        <div class="desc">{{ item.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const products = ref([
  {
    imgSrc: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i2/3519432762/O1CN012GihPX1WH2q8Q1hbN_!!0-item_pic.jpg_580x580q90.jpg_.webp',
    name: '河北皇冠梨新鲜水果',
    desc: '河北皇冠梨新鲜水果梨子雪梨,新鲜梨当季整箱应季新鲜梨子'
  },
  {
    imgSrc: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2627785630/O1CN01rLFn411rSalXPBjKw_!!2-item_pic.png_580x580q90.jpg_.webp',
    name: '大凉山丑苹果',
    desc: '冰糖心苹果新鲜水果,当季整箱盐源包邮四川红富士'
  },
  {
    imgSrc: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/2271279753/O1CN01QINfZY2LuvjqJfsVr_!!0-item_pic.jpg_580x580q90.jpg_.webp',
    name: '四川不知火丑橘',
    desc: '新鲜水果,应当季正宗耙耙桔子丑柑橘子整箱包邮'
  },
  {
    imgSrc: 'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/3015214310/O1CN01HGa05h1hi1vE4ydce_!!0-item_pic.jpg_580x580q90.jpg_.webp',
    name: '广西皇帝柑大果',
    desc: '新鲜水果,整箱蜜桔香甜橘子贡柑砂糖桔子沃柑'
  }
])
</script>

<style lang="scss" scoped>
.products-container{
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
  border: 1px solid#e4e7ed;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 40px;
  .header{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
  }
  .card-list{
    display: flex;
    flex-wrap: nowrap;

    .card-item{
      width: 24%;
      margin-right: 12px;
      padding: 12px;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
      border: 1px solid#e4e7ed;
      border-radius: 4px;
      cursor: pointer;
      img{
        width: 100%;
        margin-bottom: 8px;
      }

      .name{
        font-weight: 800;
      }

      .desc{
        width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>